<template>
  <div>
    <el-button type="primary" @click="printCode">打印</el-button>
    <div ref="print" class="printBox">
      <div v-for="(item, index) in dataListForPrint" :key="index" class="print-page">
        <table border="1">
          <!-- 表头 -->
          <tr>
            <td colspan="5" class="title">
              <div class="topTitle">
                <span>Material & FDF-01</span>
                <span>Ver: 03</span>
              </div>
            </td>
          </tr>
          <tr>
            <td colspan="5" class="title" style="text-align: center;">物料标签</td>
          </tr>
          <!-- 物料信息 -->
          <tr>
            <td class="td1">物料名称</td>
            <td colspan="4">{{ commonList.skuName }}</td>
          </tr>
          <tr>
            <td class="td1">物料代码</td>
            <td colspan="4">{{ commonList.skuCode }}</td>
          </tr>
          <tr>
            <td class="td1">自制物料批号</td>
            <td colspan="4">{{ commonList.vbatchCode }}</td>
          </tr>
<!--          <tr>
            <td class="td1">生产厂家</td>
            <td colspan="4">{{ commonList.manufacturer }}</td>
          </tr>
          <tr>
            <td class="td1">厂家批号</td>
            <td colspan="4">{{ commonList.manufacturerBatchCode }}</td>
          </tr> -->
          <tr>
            <td class="td1">生产日期</td>
            <td colspan="4">{{ commonList.productionDate }}</td>
          </tr>
          <tr>
            <td class="td1">保质期</td>
            <td colspan="4">{{ commonList.expirationDate }}</td>
          </tr>
          <tr>
            <td class="td1">数量/单位</td>
            <td colspan="4">{{ commonList.number }}/{{ commonList.skuUnit }}</td>
          </tr>
          <!-- 二维码与状态 -->
          <tr>
            <!-- 二维码区域，占3行 -->
            <td colspan="3" rowspan="3">
              <div style="display: flex; align-items: center;justify-content: flex-start;">
                <img class="codeImg" :src="item.qrcode" alt="" />
                <div>
                  <p>(ID){{ commonList.pkMaterial }}</p>
                  <p>(BN){{ commonList.vbatchCode }}</p>
                  <p>(EXP){{ commonList.restDate }}</p>
                  <p>(SN){{ item.skuBarId }}</p>
                </div>
              </div>
            </td>
            <!-- 放行状态标题 -->
            <td colspan="2">放行状态</td>
          </tr>
          <tr>
            <!-- 放行状态内容 -->
            <td rowspan="2"></td>
          </tr>
          <tr>
            <!-- 放行状态的占位内容（如不需要，可留空） -->
          </tr>
          <!-- "已领用为零件" 独占整行 -->
          <tr>
            <td colspan="5">
              <div class="footer" style="text-align: center;">
                <span class="empty-square"></span>已领用为零件
              </div>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import { createQrCodeN } from "@/api/basic/PersonnelInformation.js";

export default {
  data() {
    return {
      dataList: [], // 所有打印数据
      dataListForPrint: [], // 当前批次打印的数据
      commonList: {}, // 共同数据
    };
  },
  methods: {
    batchPrintData() {
      let currentIndex = 0;
      const batchSize = 250; // 每批渲染50条数据

      const renderBatch = () => {
        const batchData = this.dataList?this.dataList.slice(currentIndex, currentIndex + batchSize):[];
        this.dataListForPrint = batchData; // 设置当前批次的数据

        // 等待渲染完成后再进行下一批次
        this.$nextTick(() => {
          this.print(); // 打印当前批次
        });

        currentIndex += batchSize;
        if (currentIndex < this.dataList&&this.dataList.length) {
          // 延迟执行下一批次，避免页面卡顿
          setTimeout(renderBatch, 100);
        }
      };

      renderBatch(); // 开始执行分批打印
    },
    print() {
      this.$nextTick(() => {
        this.$print(this.$refs.print); // 调用打印方法
      });
    },
    printCode(data) {
      createQrCodeN(data).then(res => {
        this.dataList = res.data.printData?res.data.printData:[]; // 所有打印数据
        this.commonList = res.data.vo; // 共同数据
        console.log(this.commonList,'this.commonListthis.commonList');
        this.batchPrintData(); // 调用分批打印函数
      }).catch(err => {
        console.error('数据加载失败:', err);
      });
    }
  }
};
</script>

<style scoped>
/* 通用的展示样式 */
.empty-square {
  width: 20px;
  height: 20px;
  background-color: transparent;
  border: 1px solid #000;
  margin-right: 3px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  border: 1px solid black;
}

td {
  padding: 10px;
  text-align: left;
}

.print-page {
  margin-top: 20px;
}

.title {
  font-weight: bold;
  text-align: center;
  font-size: 16px;
}

.topTitle {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
}

.footer {
  align-items: center;
  justify-content: center;
  display: flex;
  font-size: 14px;
}

.codeImg {
  width: 200px;
  height: 200px;
}

.release-status {
  text-align: center;
  font-size: 12px;
  width: 30px;
  height: 30px;
}

.printBox {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

/* 打印时的样式 */
@media print {

  @page {
    size: auto;
    margin: 0;
  }

  body,
  html {
    margin: 0;
    padding: 0;
    height: 100%;
  }

  .printBox {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 0 !important;
    margin: 0 !important;
  }

  .empty-square {
    width: 10px !important;
    height: 10px !important;
    background-color: transparent;
    border: 1px solid #000;
    margin-right: 3px;
  }

  .print-page {
    page-break-after: always;
    padding: 10px 10px 0px 10px !important;
    margin-top: 0 !important;
  }

  table {
    width: 98% !important;
    max-width: 98% !important;
    border-collapse: collapse;
    font-size: 10px !important;
    border: 1px solid black;
  }

  td {
    padding: 3px !important;
    text-align: left;
  }

  .title {
    font-weight: bold;
    text-align: center;
    font-size: 14px !important;
  }

  .topTitle {
    display: flex;
    justify-content: space-between;
    font-size: 13px !important;
  }

  .footer {
    align-items: center;
    justify-content: center;
    display: flex;
    font-size: 12px !important;
  }

  .codeImg {
    width: 80px !important;
    height: 80px !important;
    margin-right: 5px;
  }

  .release-status {
    text-align: center;
    font-size: 6px !important;
    width: 10px !important;
    height: 10px !important;
  }
}
</style>
